<template>
  <div class="app-container">
    <!-- 模拟GPS到站信息 -->
    <el-button type="text" @click="mockGPSArriveFlag = true">模拟GPS到站</el-button>
    <el-dialog title="模拟GPS到站" :visible.sync="mockGPSArriveFlag" width="30%" :before-close="handleClose">

      <el-form ref="form" :model="mcokGPSArriveForm" label-width="110px">
        <el-form-item label="潜质仓短id">
          <el-input v-model="mcokGPSArriveForm.stationId" autocomplete="off" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="大仓库短id">
          <el-input v-model="mcokGPSArriveForm.cargoWarehouseId" autocomplete="off" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="配送模式">
          <el-select v-model="mcokGPSArriveForm.deliveryMode" placeholder="请选择">
            <el-option v-for="item in deliveryModeList" :key="item.code" :label="item.desc" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="mcokGPSArriveForm.orderType" placeholder="请选择">
            <el-option v-for="item in orderTypeList" :key="item.code" :label="item.desc" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="离开大仓时间">
          <el-date-picker v-model="mcokGPSArriveForm.leaveStoreTime" type="datetime" placeholder="选择日期" 
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="GPS到达时间">
          <el-date-picker v-model="mcokGPSArriveForm.gpsArriveTime" type="datetime" placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="produceGPSArriveMsg">立即创建</el-button>
          <el-button @click="cancelAddActivity()">重置</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>  
  </div>
</template>
  
<script>
import { mockGPSArriveMsg } from '@/api/monitor/monitor'
import { getActivityList } from '@/api/activity/activity'
import { addActivity } from '@/api/activity/activity'
import { getStations } from '@/api/activity/activity'
import { getProducts } from '@/api/activity/activity'
import { getStationStopList } from '@/api/activity/activity'
import { stopPreActivity } from '@/api/activity/activity'
import { makeOrder } from '@/api/activity/activity'
import { getProductByActivityId } from '@/api/activity/activity'


export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      activityList: null,
      listLoading: true,
      mockGPSArriveFlag: false,
      orderDialogVisible: false,
      activityDetailDialogVisible: false,
      form: {
        activityId: '',
        stationIds: [],
        product上品Ids: [],
        deliveryStartDate: '',
        deliveryEndDate: '',
        endTime: '',
        isStop: '',
        bizSubType: 11,
        isSync: "0"
      },
      stationList: [],
      productList: [],
      stationStopList: [],
      orderInfo: {
        presaleId: '',
        stationId: '',
        products: [],
        reservedTimeStart: '',
        reservedTimeEnd: ''
      },
      activityProductList: [],


      options : {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      },
      mcokGPSArriveForm: {
        stationId: 3,
        orderType: '',
        deliveryMode: '',
        cargoWarehouseId: 316,
        leaveStoreTime: '',
        gpsArriveTime: '',
      },
      deliveryModeList: [{ "code": 0, "desc": "一配" }, { "code": 1, "desc": "二配" }],
      orderTypeList: [{ "code": 1, "desc": "采购入库" }, { "code": 2, "desc": "调拨入库" }]
    }
  },
  created() {
    this.fetchActivities(),
      this.fetchStations(),
      this.fetchProducts()
  },
  methods: {
    produceGPSArriveMsg() {
      this.listLoading = true
      mockGPSArriveMsg({
        "stationId": this.mcokGPSArriveForm.stationId,
        "orderType": this.mcokGPSArriveForm.orderType,
        "orderId": this.mcokGPSArriveForm.orderId,
        "cargoWarehouseId": this.mcokGPSArriveForm.cargoWarehouseId,
        "deliveryMode": this.mcokGPSArriveForm.deliveryMode,
        "leaveStoreTime": this.mcokGPSArriveForm.leaveStoreTime,
        "logisticsArriveTime": this.mcokGPSArriveForm.gpsArriveTime
      }).then(response => {
        console.log(response)
        this.mockGPSArriveFlag = false
        this.$message.success(`${response.message}`)
      })
    },
    fetchActivities() {
      // console.log(this)
      this.listLoading = true
      getActivityList({
        "activityId": this.form.activityId
      }).then(response => {
        console.log(response)
        this.activityList = response.data
        this.listLoading = false
      })
    },
    fetchStations() {
      this.listLoading = true
      getStations({
        "stationCode": null,
        "stationName": null
      }).then(response => {
        console.log(response)
        this.stationList = response.data
        this.listLoading = false
      })
    },
    fetchProducts() {
      this.listLoading = true
      getProducts({
        "上品Id": "",
        "上品Name": "",
        "mongoId": ""
      }).then(response => {
        console.log(response)
        this.productList = response.data
        this.listLoading = false
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    createActivity() {
      console.log(this.form)
      addActivity(
        {
          "activityId": "activitytest",
          "stationIds": this.form.stationIds,
          "product上品Ids": this.form.product上品Ids,
          "deliveryStartDate": this.form.deliveryStartDate,
          "deliveryEndDate": this.form.deliveryEndDate,
          "endTime": this.form.endTime,
          "isStop": 0,
          "isSync": this.form.isSync
        }
      ).then(response => {
        console.log(response)
        this.dialogVisible = false
        this.form.activityId = ''
        this.fetchActivities()
      })
    },
    fetchActivvityStationMap(activityId) {
      // alert(activityId)
      getStationStopList(
        {
          "activityId": activityId
        }
      ).then(response => {
        this.stationStopList = response.data
        console.log(response)
      })
    },

    // 截单
    stopActivity(presaleId, stationId) {
      alert("确定接单吗？")
      stopPreActivity({
        "presaleId": presaleId,
        "stationIds": [stationId]
      }).then(response => {
        console.log(response)
        // this.stationStopList = response.data
        // this.fetchActivvityStationMap()
        this.stationStopList = this.fetchActivvityStationMap(presaleId)
        this.$message.success(`${response.message}`)
      })
    },
    // 根据disabled属性值来判断按钮是否可用
    changeStopActivityButton(isStop) {
      if (isStop === 0) {
        return false
      } else {
        return true
      }
    },

    // 根据活动创建订单
    createOrder() {
      makeOrder({
        "presaleId": this.orderInfo.presaleId,
        "stationId": this.orderInfo.stationId,
        "products": this.orderInfo.products,
        "reservedTimeStart": this.orderInfo.reservedTimeStart,
        "reservedTimeEnd": this.orderInfo.reservedTimeEnd,
        "bizSubType": this.orderInfo.bizSubType
      }).then(response => {
        console.log(response)
        // this.list = response.data
        this.orderDialogVisible = false
        this.stationStopList = this.fetchActivvityStationMap(this.orderInfo.presaleId)
        this.$message.success(`${response.message}`)
      })
    },
    // 根据活动id得到对应的商品信息
    fetchProductByActivityId(activityId, stationId) {
      this.orderInfo.presaleId = activityId
      this.orderInfo.stationId = stationId
      console.log(this.orderInfo)
      getProductByActivityId({
        "activityId": activityId
      }).then(response => {
        this.activityProductList = response.data
        // console.log(this.activityProductList)
      })
    },
    refetchStations() {
      this.form.activityId = ''
      this.fetchActivities()
    },
    cancelAddActivity() {
      this.form.stationIds = [],
        this.form.product上品Ids = [],
        this.form.deliveryStartDate = "",
        this.form.deliveryEndDate = "",
        this.form.endTime = "",
        this.form.isStop = "",
        this.form.bizSubType = 11
    },
    cancelCreateOrder() {
      this.orderInfo.presaleId = "",
        this.orderInfo.stationId = "",
        this.orderInfo.products = [],
        this.orderInfo.reservedTimeStart = ""
      this.orderInfo.reservedTimeEnd = ""
    }



  }
}
</script>
  
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>